<template>
  <div class="register-view">
    <h2>注册</h2>
    <form @submit.prevent="onSubmit">
      <div>
        <label for="username">用户名：</label>
        <input id="username" v-model="form.username" required />
      </div>
      <div>
        <label for="password">密码：</label>
        <input id="password" type="password" v-model="form.password" required />
      </div>
      <div>
        <label for="confirmPassword">确认密码：</label>
        <input id="confirmPassword" type="password" v-model="form.confirmPassword" required />
      </div>
      <div>
        <label for="email">邮箱：</label>
        <input id="email" v-model="form.email" required />
      </div>
      <div>
        <label for="tel">电话：</label>
        <input id="tel" v-model="form.tel" required />
      </div>
      <div>
        <label for="clazz">班级：</label>
        <input id="clazz" v-model="form.clazz" required />
      </div>
      <button type="submit">注册</button>
    </form>
    <div v-if="error" class="error">{{ error }}</div>
  </div>
</template>

<script>
import API from '@/api'
import { ElMessage } from 'element-plus'

export default {
  name: 'RegisterView',
  data() {
    return {
      form: {
        username: '',
        password: '',
        confirmPassword: '',
        email: '',
        tel: '',
        clazz: '',
        role: 1
      },
      error: ''
    };
  },
  methods: {
    async onSubmit() {
      if (this.form.password !== this.form.confirmPassword) {
        this.error = '两次输入的密码不一致';
        return;
      }
      try {
        await API.register({
          username: this.form.username,
          password: this.form.password,
          email: this.form.email,
          tel: this.form.tel,
          clazz: this.form.clazz,
          role: this.form.role
        });
        ElMessage({ type: 'success', message: '注册成功！' });
        this.error = '';
        // 可选：注册成功后跳转到登录页
        this.$router.push({ name: 'login' });
      } catch (err) {
        this.error = err.response?.data?.message || '注册失败,请重试';
        ElMessage({ type: 'error', message: this.error });
      }
    }
  }
};
</script>

<style scoped>
.register-view {
  max-width: 400px;
  margin: 40px auto;
  padding: 24px;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fff;
}
.register-view h2 {
  text-align: center;
}
.register-view .error {
  color: red;
  margin-top: 12px;
  text-align: center;
}
.register-view form > div {
  margin-bottom: 16px;
}
.register-view label {
  display: inline-block;
  width: 90px;
}
.register-view input {
  width: 220px;
  padding: 6px;
}
.register-view button {
  width: 100%;
  padding: 8px;
  background: #42b983;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.register-view button:hover {
  background: #369870;
}

@media (max-width: 600px) {
  .register-view {
    max-width: 100vw;
    min-width: 0;
    margin: 0;
    padding: 12px 4px;
    border-radius: 0;
    border: none;
    background: #fff;
    box-shadow: none;
  }
  .register-view form > div {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .register-view label {
    width: auto;
    margin-bottom: 4px;
    font-size: 15px;
  }
  .register-view input {
    width: 100%;
    min-width: 0;
    font-size: 15px;
    padding: 8px 6px;
    box-sizing: border-box;
  }
  .register-view button {
    font-size: 16px;
    height: 40px;
    margin-top: 8px;
  }
  .register-view h2 {
    font-size: 22px;
    margin-bottom: 18px;
  }
}
</style>